<template>
  <div>
    <fc-table-search ref="table" :form-items="formItems" :table-columns="tableColumns"
      :form-config="{ 'label-width': '100px' }" @requestMethod="getTableData">
      <template #handleDetail="{ row }">
        <el-button type="text" size="mini" @click="onEdit(row.id)">编辑</el-button>
        <el-button type="text" size="mini" @click="onToggleActivity(row)">{{ row.is_abled ? '下线' : '上线' }}</el-button>
        <el-button type="text" size="mini" @click="onPreview(row.id, row.title)">预览</el-button>
        <el-button type="text" size="mini" @click="onDelete(row.id)">删除</el-button>
      </template>
      <template slot="handleLeft">
        <el-button  size="primary" @click="onAdd">
        <i class="el-icon-plus"></i>
        新增页面
        </el-button>
      </template>
    </fc-table-search>
  </div>
</template>

<script>
// import { checkBatchPageList } from '@/api/accountCheck/recordQuery'
// import { isEmpty } from '@/utils/index'
import {
  getCmsPageList,
  updateStatus,
  deletePage
} from '@/api/activity'
import { forEach } from 'lodash-es'
// import TableFlexHeight from '@/mixins/tableFlexHeight'
// import { activityStatus } from '@/config/activity'
export default {
  components: {},
  data() {
    return {
      tableData: {} // 收集查询
    }
  },
  computed: {
    // 搜索表单定义
    formItems() {
      return [
        { comp: 'input', prop: 'name', label: '页面标题', clearable: true },
        {
          comp: 'select',
          prop: 'isAbled',
          label: '页面状态',
          options: [{
            value: 0,
            label: '下线'
          }, {
            value: 1,
            label: '上线'
          }],
          includeAll: false
        }
      ]
    },
    // 表格定义
    tableColumns() {
      return [
        { prop: 'id', label: '页面ID' },
        { prop: 'name', label: '页面标题' },
        {
          prop: 'status',
          label: '页面状态'
          // width: 80
        },
        {
          prop: 'create_time',
          label: '创建时间'
          // width: 120
        },
        {
          prop: 'update_time',
          label: '更新时间'
          // width: 120
        },
        {
          label: '操作',
          fixed: 'right',
          // width: 220,
          slotName: 'handleDetail'
          // render: (h, {row}) => {
          //   return <div>
          //     <el-button size="mini" type="text" onClick="onEdit(row.id)">编辑</el-button>
          //     <el-button size="mini" type="text" onClick="onToggleActivity(row)">{ row.isAbled === 0 ? '上线' : '下线' }</el-button>
          //     <el-button size="mini" type="text" onClick="onPreview(row.id, row.title)">预览</el-button>
          //     <el-button size="mini" type="text" onClick="onDelete(row.id)">删除</el-button>

          //   </div>
          // }
        }
      ]
    }
  },
  created() { },

  methods: {
    async getTableData({ current, size, ...tableData }, fn) {
      try {
        //这个函数会返回当前的表单属性，fn回调会渲染表格页面
        let { ...params } = tableData
        params.pageNum = current
        params.pageSize = size
        //接口返回的数据
        let res = await getCmsPageList(params)
        console.log(res);
        //解构数据 
        let { list, total } = res.data
        //loadsh兼容的方法 修改前端后端数据定义不一致的情况
        forEach(list, item => {
          item.status = item.is_abled ? '上线' : '下线'
          item.isAbled=item.is_abled
        })
        //数据传入回调函数
        fn({
          data: list || [],
          total
        })
      } catch (err) {
        fn({ message: err.message })
      }
    },
    onAdd(){
      this.$store.commit('SET_INIT_PAGE_DATA')
      this.$router.open('/decorate')
    },
    onEdit(id){
        this.$router.open({path:'/decorate',query:{id}})
    },
    onToggleActivity(row){
      if (row.isAbled===0) {
        this.online(row,1)
      } else {
        this.offline(row,0)
      }
    },
    //控制上线下线的方法
    online(row,isAbled){
      //开启加载数据loading
      this.$set(row,'loading',true)
      updateStatus({id:row.id,isAbled}).then(()=>{
        this.$message.success('上线成功')
        //调用从新渲染的方法
        this.$refs.table.onRefresh(true)
      }).catch(err=>{
        this.$message.warning(`'操作失败:'${err.message}`);
      }).finally(()=>{
        //请求结束 关闭loading
        this.$set(row,'loading',false)
      })

    },
    offline(row,isAbled){
      //警告框
      this.$confirm(`是否确认下线活动${row.name}`,'提示',{
        confirmButtonText:'yes',
        concalButtonText:'no',
        type:'warning',
        //点击别处不可以关闭警告框
        closeOnClickModal:false
      }).then(()=>{
        //点击确定后请求接口 更新数据
        updateStatus({id:row.id,isAbled}).then(()=>{
          this.$message.success('下线成功')
          this.$refs.table.onRefresh(true)
        }).catch(err=>{
          this.$message.warning(`'操作失败:'${err.message}`);
        })
      })
    },
    //预览方法
    onPreview(id){
      //返回一个跳转链接
      console.log(this.$store.state.wxParams,'aaa');
      let url = this.$router.resolve({ path: `/preview`, query: { id, data: this.$store.state.wxParams } })
       window.open(url.href,'_blank')  
    },
    //删除方法
    onDelete(id){
      this.$confirm('是否确定要删除？','提示',{
        confirmButtonText:'yes',
        concalButtonText:'no',
        type:'warning',
        //点击别处不可以关闭警告框
        closeOnClickModal:false
      }).then(()=>{
        deletePage({id}).then(()=>{
          this.$message.success('删除成功')
          this.$refs.table.onRefresh(true)
        }).catch(err=>{
          this.$message.warning(`删除失败,原因:${err.message}`,'warning')
        })
      })
    }
  }
}
</script>
